<template>
  <div>
    <page-list :x-uri="uri" :doactions="doactions" :tree="true" :lazy="true" :lazy-fun="loadChild">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'exam.question.bank.category.create'" size="mini" type="primary" @click="create">新建分类</el-button>
      </template>
    </page-list>
    <el-dialog title="请输入分类名称" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false" top="30vh">
      <el-form v-if="dialogVisible" ref="category" :model="category" size="small">
        <el-form-item prop="title" :rules="rulesTtitle">
          <edu-input key="title" :value.sync="category.title" :args="{ minlength: 2, maxlength: 30 }" />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button type="primary" :disabled="disableSubmit" @click="onSubmit">保存</el-button>
            <el-button @click="dialogVisible = false">关闭</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import EduInput from '@public/form/input.vue';
import Tabs from '../tabs';
export default {
  components: {
    PageList,
    EduInput,
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/exam/admin/question/bank/category/list',
      doactions: [
        {
          title: '添加子分类',
          meta: { permission: 'exam.question.bank.category.create' },
          callback: this.addChildren,
          display: ({ row }) => {
            return row.pid == 0;
          }
        },
        { title: '编辑', meta: { permission: 'exam.question.bank.category.edit' }, callback: this.edit },
        { title: '删除', meta: { permission: 'exam.question.bank.category.delete' }, callback: this.deleteCategory }
      ],
      dialogVisible: false,
      disableSubmit: false,
      category: {
        pid: 0,
        title: ''
      },
      rulesTtitle: [
        { required: true, message: '分类名称必须填写', trigger: ['blur', 'change'] },
        {
          pattern: /^.{2,30}$/,
          message: '分类名称为2-30个字符',
          trigger: ['blur', 'change']
        }
      ]
    };
  },
  methods: {
    create: function() {
      this.category = {
        pid: 0,
        title: ''
      };
      this.dialogVisible = true;
    },
    addChildren: function({ row }) {
      this.category = {
        pid: row.id,
        title: ''
      };
      this.dialogVisible = true;
    },
    edit: function({ row }) {
      this.category = {
        id: row.id,
        title: row.title
      };
      this.dialogVisible = true;
    },
    onSubmit: function() {
      this.$refs['category'].validate(valid => {
        if (valid) {
          this.disableSubmit = true;
          var method = 'POST';
          var uri = '/exam/admin/question/bank/category/create';
          if (this.category.id) {
            method = 'PUT';
            uri = '/exam/admin/question/bank/category/' + this.category.id + '/edit';
          }
          this.$http.send(
            method,
            uri,
            this.category,
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.disableSubmit = false;
              this.$message.error(error.msg);
            },
            false
          );
        }
      });
    },
    deleteCategory: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/exam/admin/question/bank/category/' + row.id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            },
            false
          );
        })
        .catch(() => {});
    },
    loadChild: function(row, treeNode, resolve) {
      this.$http.get(
        '/exam/admin/question/bank/category/' + row.id + '/children',
        {
          pid: row.id
        },
        ({ data }) => {
          resolve(data);
        },
        response => {
          resolve([]);
          this.$message.error(response.msg);
        },
        false
      );
    }
  }
};
</script>
